<template>
  <Row>
    <Col :span="3">
        <hierTree :data="current.animations" v-bind="treeAttrs" :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"></hierTree>
    </Col>
    <Col v-if="item" :span="21">
        <cfg-form :ref="'form'" v-bind="formAttrs" :data="item" @change="formChange"></cfg-form>
        <cfg-form :ref="'formValues'" v-bind="valuesAttrs" :data="item.params"></cfg-form>
    </Col>
</Row>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
        item:null
    };
  },
  props: {
    current:{
        default:()=>{
            return {
            }
        }
    }
  },
  watch: {},
  computed: {
    treeAttrs(){
        return {
            title:{
                "en-US":'Animations List',
                "zh-CN": 'Animations List'
            }[this.G_Locale],
            rootId:null,
            nameId:'id',
            namePid:'parentId',
            nameTitle:'id',
            rootEnable:true,
            menuEnable:true,
            addEnable:true,
            removeEnable:true,
            menus:[]
        }
    },
    formAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'id',
                    title: 'id',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'type',
                    title: '类型',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:[
                            {value:'animate',label:'属性变换'},
                            {value:'translate',label:'平移'},
                            {value:'rotate',label:'旋转'},
                            {value:'scale',label:'缩放'},
                            {value:'motion',label:'运动'},
                        ],
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    valuesAttrs(){
        if(this.item.type==='animate'){
            return this.animateAttrs;
        }else if(this.item.type==='translate'||this.item.type==='rotate'||this.item.type==='scale'){
            return this.tranformAttrs;
        }else if(this.item.type==='motion'){
            return this.motionAttrs;
        }
    },
    animateAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'attributeName',
                    title: '属性名',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'from',
                    title: '从',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'to',
                    title: '到',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'dur',
                    title: '持续',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatCount',
                    title: '重复次数',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatDur',
                    title: '重复持续时间',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'begin',
                    title: '开始',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'keyTimes',
                    title: '动画时刻',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'values',
                    title: '时刻值',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'href',
                    title: '执行体',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:this.current.elements?this.current.elements.map(item=>{
                            return {
                                value:item.id,
                                label:item.id
                            }
                        }):[]
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    tranformAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'from',
                    title: '从',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'to',
                    title: '到',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'dur',
                    title: '持续',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatCount',
                    title: '重复次数',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatDur',
                    title: '重复持续时间',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'begin',
                    title: '开始',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'keyTimes',
                    title: '动画时刻',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'values',
                    title: '时刻值',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'href',
                    title: '执行体',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:this.current.elements?this.current.elements.map(item=>{
                            return {
                                value:item.id,
                                label:item.id
                            }
                        }):[]
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    motionAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'path',
                    title: '路径',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'dur',
                    title: '持续',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatCount',
                    title: '重复次数',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'repeatDur',
                    title: '重复持续时间',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'begin',
                    title: '开始',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'keyTimes',
                    title: '动画时刻',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'values',
                    title: '时刻值',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text',
                    },
                },
                {
                    key: 'href',
                    title: '执行体',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:this.current.elements?this.current.elements.map(item=>{
                            return {
                                value:item.id,
                                label:item.id
                            }
                        }):[]
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },

  },
  created() {},
  mounted() {},
  methods: {
    select(item){
        this.item = item;
    },
    add(item){
        this.current.animations.push(this.animateTpl());
    },
    remove(item){
        this.current.animations.splice(this.current.animations.indexOf(item),1);
        this.item = null;
    },
    menu(menu,item){
        
    },
    formChange(key,value){
        if(key==='type'){
            if(value==='animate'){
                this.item.params = this.linearTpl().params;
            }
            if(value==='translate'||value==='rotate'||value==='scale'){
                this.item.params = this.tranformTpl(value).params;
            }
            if(value==='motion'){
                this.item.params = this.motionTpl().params;
            }
        }
    },
    setTree(fn){
      this.$refs.tree.$children[0].setTree(fn)
    },
    animateTpl(){
        return {
            id:'animate1',
            type:'animate',
            params:{
                attributeName:"fill",
                from:"white" ,
                to:"green",
                dur:"2s",
                fill:"freeze",
                repeatCount:"indefinite",
                repeatDur:"indefinite",
                begin:"click+2s",
                calcMode:"linear",
                keyTimes:"0;0.5;1",
                values:"10;50;20",                         
                href:"rect"
            }
        }
    },
    tranformTpl(type){
        return {
            id:'tranform1',
            type:type,
            params:{
                from:"50" ,
                to:"100",
                dur:"2s",
                fill:"freeze",
                repeatCount:"indefinite",
                repeatDur:"6s",
                begin:"click+2s",
                calcMode:"linear",
                keyTimes:"0;0.5;1",
                values:"10;50;20",                         
                href:"rect"
            }
        }
    },
    motionTpl(){
        return {
            id:'motion',
            type:'motion',
            params:{
                path:"50" ,
                dur:"2s",
                fill:"freeze",
                repeatCount:"infinite",
                repeatDur:"6s",
                begin:"click+2s",
                calcMode:"linear",
                keyTimes:"0;0.5;1",
                values:"10;50;20",                         
                href:"rect"
            }
        }
    },
  }
};
</script>
<style scoped>
</style>